<template>
  <div>
    <v-steps :operations="list"></v-steps>
    <el-table ref="multipleTable"
              border
              stripe
              :data="orderList"
              style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.childOrderList">
            <template v-for='(col) in childOrderHeader'>
              <el-table-column :show-overflow-tooltip="true"
                               :prop="col.key"
                               :label="col.value"
                               :key="col.key">
              </el-table-column>
            </template>
          </el-table>
        </template>
      </el-table-column>
      <template v-for='(col) in orderHeader'>
        <el-table-column :show-overflow-tooltip="true"
                         :prop="col.key"
                         :label="col.value"
                         :key="col.key">
        </el-table-column>
      </template>
      <el-table-column label="操作"
                       width="80"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini"
                     class="del-com"
                     v-if="scope.row.sexy=='男'">新增</el-button>
          <el-button size="mini"
                     class="del-com"
                     v-else>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="toJudgeDialog = true">点击打开 Dialog</el-button>
    <el-button @click="toDeliveryVisible = true">点击打开 Dialog</el-button>
    <el-dialog title="提示"
               :visible.sync="toJudgeDialog"
               width="30%"
               :before-close="handleClose">
      <span>是否提交审核</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="toJudge">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="dialogObj.title"
               :visible.sync="formDialog">
      <span v-if="dialogObj.status == 5">厂家货物准备完成</span>
      <el-form>
        <el-form-item v-if="dialogObj.status == 8"
                      label="配送时间"
                      label-width="120">
          <el-input v-model="dialogObj.sendTime"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="dialogObj.status == 5"
                      label="预计到货时间"
                      label-width="120">
          <el-input v-model="dialogObj.arrivalTime"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="dialogObj.status == 6"
                      label="入库时间"
                      label-width="120">
          <el-input v-model="dialogObj.laidUpTime"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="dialogObj.status == 6"
                      label="回访意见"
                      label-width="120">
          <el-input v-model="dialogObj.reportAdvice"
                    type="textarea"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="formDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="toModify">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import vSteps from '@/components/v-steps'

export default {

  data() {
    return {
      toJudgeDialog: false,
      formDialog: false,
      list: [{ title: '1', description: '王大锤申请' }, { title: '2', description: '王二锤审核' }, { title: '3', description: '王三锤通过' }],
      childOrderList: [['6', '6', '6']],
      childHeader: ['E', 'F', 'H'],
      header: ['A', 'B', 'D'],
      data_list: [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [10, 11, 12]
      ],
      orderHeader: [
        { key: 'name', value: '姓名' },
        { key: 'age', value: '年龄' },
        { key: 'sexy', value: '性别' }
      ],
      childOrderHeader: [
        { key: 'Q', value: 'Q' },
        { key: 'W', value: 'W' },
        { key: 'E', value: 'E' },
        { key: 'R', value: 'R' }
      ],
      orderList: [
        { name: '德玛西亚', sexy: '男', age: 12, childOrderList: [{ Q: '沉默', W: '护盾', E: '转圈圈', R: '大宝剑' }] },
        { name: '拉克丝', sexy: '女', age: 12, childOrderList: [{ Q: '控制', W: '护盾', E: '减速', R: '光束炮' }] },
        { name: '伊泽瑞尔', sexy: '男', age: 12, childOrderList: [{ Q: '飞弹', W: '加速', E: '位移', R: '光光标' }] },
        { name: '薇恩', sexy: '女', age: 12, childOrderList: [{ Q: '翻滚', W: '圣银弩箭', E: '射墙', R: '然我们来猎杀那些陷入黑暗的人们' }] }
      ]
    }
  },
  methods: {
    toJudge() {
      this.toJudgeDialog = false
    },
    toDelivery() {
      this.toDeliveryDialog = false
    }
  },
  components: {
    vSteps
  }
}
</script>
